<template>
  <div>
    <el-form class="quesform" :model="quesForm" ref="quesForm" :rules="rules">
      <h3>请如实回答下列问题</h3>
      <br />
      <el-form-item
        v-for="(item, index) in quesnaireform"
        :key="item.key"
        :prop="`radioArray.${index}`"
        :rules="rules.radioArray">
        <span>{{ item.psychologicalProblemsId }}</span>
        <span>、</span>
        <span>{{ item.problem }}</span>
        <br />

        <el-radio-group
          v-model="quesForm.radioArray[index]"
          v-for="opt in item.opts"
          :key="opt.id"
        >
          <el-radio :value="opt.value" :label="opt.lab"
            >{{ opt.lab }}&emsp;&emsp;&emsp;&emsp;</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <br/>
      <el-form-item
        >&emsp;&emsp;&emsp;&emsp;
        <el-button type="primary" @click="onSubmit('quesForm')">提交</el-button>
        <el-button @click="reset('quesForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { baseUrl } from "@/utils/request";
import axios from "axios";

export default {
  components: {},
  data() {
    return {
      //存储问题组的数组
      quesnaireform: [],
      i: 0,
      quesForm: {
        radioArray: []
      },
      test: null,
      
      rules: {
        radioArray: [
          { required: true, message: "请选择您的答案", trigger: "change" },
        ],
      },
    };
  },

  created() {
    this.load();
  },
  methods: {
    load() {
      axios.get(baseUrl + "/psychologicalProblems/list/").then((res) => {
        // console.log(res)
        if (res.data.code == "200") {
          var data = res.data.data;
          this.quesnaireform = data;
          // console.log(this.quesnaireform)
        } else {
          this.$message.error("数据获取失败");
        }
      });
    },
    onSubmit() {
      // 表单提交触发方法
      this.$refs["quesForm"].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.$router.push("/healthconsultorder");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    reset(formName){
      this.$refs[formName].resetFields();
    }
  },
};
</script>

<style scoped>
h3 {
  margin: 0 auto;
  margin-top: 15px;
}

.quesform {
  margin: 0 auto;
  padding: 20px;
  width: 80%;
}
</style>
